<template>
  <div class="loginContainer">
    <div class="loginBox">
      <div class="loginText">
        <div class="logo">
          <img src="../assets/logo.png" alt="" class="logoImg" />
        </div>
        <div class="TitleDiv">
          <span class="Title1">超然云信巡课系统</span>
          <br>
          <span class="Title2">轻松巡视在线课堂</span>
        </div>
      </div>
      <div class="loginMain" >
        <div style="height:20%;"></div>


        <el-form
          ref="loginFormRef"
          :inline="true"
          :model="loginForm"
          :rules="loginFormRules"
          class="loginFormDiv"
        >
          <div class="welcomeDiv">
            <span class="welcome">欢迎登录</span>
          </div>
          
         
          <div class="loginDiv">
            <!-- <span class="login">账号</span> -->
            
            <el-form-item prop="username" >
              <el-input
                v-model="loginForm.username"
                placeholder="请输入账号"
              ></el-input>
            


            </el-form-item>
           

            <!-- <span class="login">密码</span> -->
            <el-form-item prop="passwd" >
              <el-input
                v-model="loginForm.passwd"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-top:27px">
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </div>
          



        </el-form>
        
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        passwd: ''
      },
      // 表单的验证规则对象
      loginFormRules: {
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        passwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('login', this.loginForm)
        if (res.code !== '1000')
          return this.$message.error('账号或密码错误，请重新输入！')
        //this.$message.success('登录成功')
        window.sessionStorage.setItem('token', res.data.token)
        window.sessionStorage.setItem('username', this.loginForm.username)
        this.$router.push('/home')
      })
    }
  },
  created() {
    //增加键盘回车登录事件
    let that = this
    document.onkeydown = function(e) {
      let key = window.event.keyCode
      if (key == 13) {
        that.login()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.loginContainer {
  background: url(../assets/login-background.png) no-repeat;
  width: 100%;
  height: 100%;
  min-width: 1024px;
  z-index: -10;
  zoom: 1;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
}
.loginBox {
  
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.Title1 {
  font-size: 46px;
  color: #fff;
  line-height: 100px;
}
.Title2 {
  font-size: 24px;
  color: #fff;
}
.welcome {
  font-size: 24px;
  color: #c0eeff;
  font-weight: 400;
}
.login {
  font-size: 12px;
  color: #414141;
}
.loginFormDiv {
  width:260px;
  margin:0 auto;
}
.welcomeDiv {
  // margin: 0 0 36px 15%;
  
  text-align: center;
  margin-bottom:100px;
}
.logo {
  // margin: 0 0 36px 15%;
  margin:0 0 140px 0;
}
.TitleDiv {
  // margin: 0 0 36px 15%;
  margin-top: 24px;
}
.loginDiv {
 width:auto;
}
.loginText {
  height: auto;
  float: left;
  padding: 100px 0 0 140px;

}
.loginMain {
  min-width: 300px;
  width: 20%;
  max-width: 450px;
  height: 100%;
  float: right;
  background:rgba(17, 34, 74, 0.2)
}
.logoImg {
  width: 230 px;
  height: 61px;
}
.el-form--inline .el-form-item {
  margin-right: 0px;
  display:table;
  width:100%
}
.el-button /deep/ {
  width: 260px;
  height: 38px;
  font-size: 14px;
  border-radius: 3px;
  background: #1db9f3;
  border: none;
  padding: 0;
  margin-top:20px;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background: #3acaff;
  border: none;
  color: #fff;
  outline: none;
}
.el-form-item /deep/ .iconfont {
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  margin:0 auto;
}
.el-input /deep/ .el-input__inner {
  font-size: 14px;
  color: #8bcbf2;
  background: none;
  border: none;
  border-bottom: 1px solid #346a88;
  border-radius:0px;
  text-align: center;
  width:260px;
  margin:0 auto;

  
}



.el-input /deep/ input::-webkit-input-placeholder {
  color: #4590be;
  font-size: 12px;
  
  margin:0 auto;
}

.el-input /deep/ input:-moz-placeholder {
  color: #4590be;
  font-size: 12px;
}
.el-input /deep/ input:-ms-input-placeholder {
  color: #4590be;
  font-size: 12px;
}
.el-input /deep/ .el-input__inner:focus {
  border-color: #1361c5;
}



</style>
